<template>
  <input ref="uploadFiles" type="file" style="display: none" @change="sendFilesMessages" single />
</template>

<script setup>
import { ref } from "vue";
import saveMsg from "../../utils/saveMsg.js";
import { MESSAGE_TYPE } from "@/IM/constant";
const emit = defineEmits(["onStartLoading", "onLoadending"]);
//选择文件
const uploadFiles = ref(null);
const openChooseFiles = () => {
  uploadFiles.value.click();
};
//发送文件
const sendFilesMessages = async () => {
  const commonFile = uploadFiles.value.files[0];
  const file = {
    data: commonFile, // file 对象。
    filename: commonFile.name, //文件名称。
    filetype: commonFile.type, //文件类型。
    size: commonFile.size
  };

  const msgOptions = {
    file: file,
    onFileUploadError: err => {
      // 图片文件上传失败。
      console.log("onFileUploadError", err);
      emit("onLoadending");
    },
    onFileUploadProgress: e => {
      // 图片文件上传进度。
      console.log(e);
      emit("onStartLoading");
    },
    onFileUploadComplete: () => {
      // 上传成功。
      emit("onLoadending");
    }
  };

  saveMsg(msgOptions, MESSAGE_TYPE.FILE);
};

defineExpose({
  openChooseFiles
});
</script>

<style lang="scss" scoped></style>
